<template>
  <div class="box">
      <div class="container-item" :class="{'active' :changeIndex== index }" v-for="(item,index) in fristList" :key="index" @click="changeSecond(index)">
          {{item.name}}
      </div>
  </div>
</template>

<script>
export default {
    props:{
        fristList:{
            type:Array,
        },
        changeIndex:{
            type:Number
        }
    },
    methods:{
        changeSecond(index){
            this.$emit('changeSecond',index)
        }
    }
}
</script>

<style scoped>
    .container-item{
        width: 100%;
        height: 0.8rem;
        line-height: .8rem;
        text-align: center;
    }
    .active{
        border-left: .1rem solid red;
    }
</style>